  <template>
    <div>
      <!-- 三级菜单 导航框 -->
      <el-card style="margin:20px 0px">
        <CategorySelect @getCategoryId="getCategoryId" :show="!isTable" />
      </el-card>

      <!-- 三级菜单数据展示 -->
      <el-card v-show="isTable">
        <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="showTable">添加属性</el-button>
        <el-table style="width: 100%" :data="attrList">
          <el-table-column label="序号" width="80px" type="index" align="center"></el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="150px"></el-table-column>
          <el-table-column label="属性值列表" width="width">
            <template slot-scope="{ row }">
              <!-- tag组件标签 -->
              <el-tag type="success" v-for="item in row.attrValueList" :key="item.id" style="margin: 0px 20px">{{
                  item.valueName
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="400px">
            <template slot-scope="{ row }">
              <!-- 按钮组件标签 -->
              <el-button type="warning" size="mini" icon="el-icon-edit" @click="updateAttr(row)">修改</el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete-solid">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 添加修改结构 -->
      <div v-show="!isTable">
        <el-form :inline="true" ref="form" label-width="60px">
          <el-form-item label="属性名">
            <el-input placeholder="请输入属性名" v-model="attrInfo.attrName"></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" icon="el-icon-plus" @click="addattrList" :disabled="!attrInfo.attrName">添加属性值
        </el-button>
        <el-button @click="isTable = true">取消</el-button>
        <el-table style="width: 100%; margin:20px 0px" :border="true" :data="attrInfo.attrValueList">
          <el-table-column type="index" label="序号" width="80px" align="center"></el-table-column>
          <el-table-column prop="prop" label="属性值名称" width="width">
            <template slot-scope="{row,$index}">
              <el-input v-model="row.valueName" placeholder="请输入属性值名称" size="mini" v-if="row.flag" @blur="toLook(row)"
                @keyup.native.enter="toLook(row)" :ref="$index"></el-input>
              <span v-else @click="toEdit(row, $index)" style="display:block">{{ row.valueName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{row, $index}">
              <el-popconfirm :title='"这是一段内容确定删除" + row.valueName + "吗？"' @onConfirm="deleteAttrValue($index)">
                <el-button type="danger" icon="el-icon-delete" size="mini" slot="reference"></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-button type="primary" @click="addUpdateAttr" :disabled="attrInfo.attrValueList.length < 1">保存</el-button>
        <el-button @click="isTable = true">取消</el-button>
      </div>
    </div>
  </template>

  <script>
  import cloneDeep from 'lodash/cloneDeep'
  export default {
    name: 'Spu',
    data() {
      return {
        // 三级分类id
        category1Id: '',
        category2Id: '',
        category3Id: '',
        // 获取三级分类数据
        attrList: [],
        // 控制表格显示或者隐藏属性
        isTable: true,
        //添加属性|修改属性的数据
        attrInfo: {
          attrName: "", //添加的属性名
          attrValueList: [
            //属性名中的属性值，因为属性值可以是多个，因此需要的是数组，每一个属性都是一个对象，对象里面包含attrId，valueName
          ],
          categoryId: 0, //携带的是三级的id
          categoryLevel: 3, //携带3级分类
        },
      }
    },

    methods: {
      // 子传父 获取到三级分类的id
      getCategoryId({ categoryId, level }) {
        // 区分三级分类id 并存储
        if (level == 1) {
          this.category1Id = categoryId;
          // 当一级分类发生变化 二三及清空
          this.category2Id = '';
          this.category3Id = '';
        } else if (level == 2) {
          this.category2Id = categoryId;
          // 当一级分类发生变化 三及清空
          this.category3Id = '';
        } else {
          // 代表三级分类id都有了
          this.category3Id = categoryId;
          // 发送请求获取平台属性
          this.getAttrList();
        }
      },

      // 获取商品品牌属性
      async getAttrList() {
        // 解构出id参数
        const { category1Id, category2Id, category3Id } = this;
        // 发起请求，获取商品属性
        let res = await this.$API.attr.reqAttrList(
          category1Id,
          category2Id,
          category3Id
        );
        if (res.code == 200) {
          // 父组件存储data
          this.attrList = res.data;
        }
      },

      // 点击添加属性按钮
      showTable() {
        this.isTable = false;
        // 并清除上一次留下来的属性 和 获取到3及id
        this.attrInfo = {
          attrName: "", //添加的属性名
          attrValueList: [
            //属性名中的属性值，因为属性值可以是多个，因此需要的是数组，每一个属性都是一个对象，对象里面包含attrId，valueName
          ],
          categoryId: 0, //携带的是三级的id
          categoryLevel: this.category3Id, //携带3级分类
        }
      },

      // 添加属性点击操作
      addattrList() {
        this.attrInfo.attrValueList.push({
          //对于修改某一个属性的时候，可以在已有的属性值基础之上新增新的属性值（新增属性值的时候，需要把已经有的属性值id给带上）
          attrId: this.attrInfo.id,
          //属性值
          valueName: "",
          //flag属性:给每一个属性值添加一个标记flag,用户切换查看模式与编辑模式，好处，每一个属性值可以控制自己的模式切换
          //当前flag属性，响应式数据(数据变化视图跟着变化)
          flag: true
        });
        // 自动聚焦
        this.$nextTick(() => {
          this.$refs[this.attrInfo.attrValueList.length - 1].focus();
        })
      },

      // 点击修改操作
      updateAttr(row) {
        //将选中的属性赋值给attrInfo
        //由于数据结构当中存在对象里面套数组，数组里面有套对象，因此需要使用深拷贝解决这类问题」
        // cloneDeep 这里使用现成的 
        this.isTable = false;
        this.attrInfo = cloneDeep(row);
        // 修改某一个属性的时候 给原有的属性加上 flag
        this.attrInfo.attrValueList.forEach(item => {
          // 直接 item.flag = true 是不行的这个是没法触发响应式的
          this.$set(item, 'flag', false)
        })
      },

      // input的失去焦点操作
      toLook(row) {
        //如果属性值为空不能作为新的属性值，需要给用户 提示，让他输入一个其他的属性值
        if (row.valueName.trim() == '') {
          this.$message({
            message: '请不要添加空白属性~',
            type: 'warning'
          });
          return
        }
        //row:形参是当前用户添加的最新的属性值
        //当前编辑模式变为查看模式[让input消失，显示span]
        // row新增的和上面的属性相同
        let isReate = this.attrInfo.attrValueList.some(item => {
          // 需要将row从数组里面判断去除
          // row是数组的最新值 最新一项 item是每一项
          // 这里是为了不将已经添加到该数组里面的最后一项进行判断 所以加上 row != item 
          if (row != item) {
            return row.valueName == item.valueName;
          }
        })
        if (isReate) {
          this.$message({
            message: '请不要添加已有属性~',
            type: 'warning'
          });
          return
        }

        row.flag = false;
      },

      // input 点击事件
      toEdit(row, index) {
        row.flag = true;
        //获取input节点，实现自动聚焦
        //需要注意:点击span的时候，切换为input变为编辑模式，但是需要注意，对于浏览器而言，页面重绘与重拍耗时间的
        //点击span的时候，重绘重拍一个input它是需要耗费事件，因此我们不可能点击span立 马获取到input
        //$nextTick,当节点渲染完毕了，会执行一次
        this.$nextTick(() => {
          this.$refs[index].focus();
        })

      },

      // 点击修改里面的属性删除按钮
      deleteAttrValue(index) {
        // 删除掉 attrValueList 的第 index 项
        this.attrInfo.attrValueList.splice(index, 1)
      },

      // 新增和添加保存按钮 添加发送请求
      async addUpdateAttr() {
        // 整理参数
        // 删除掉空属性
        this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item => {
          // 过滤掉属性值不为空 并且删除 falg 属性 因为接口是不需要这个属性的
          if (item.valueName != '') {
            // 删除掉flag属性
            delete item.flag;
            return true;
          }
        })

        // 判断请求
        try {
          // 发送请求
          await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo);
          // 弹出提示
          // 显示开始获取的数据
          this.isTable = true;
          this.$message({ type: 'success', message: '保存成功~' });
          // 保存成功查询获取数据
          this.getAttrList();
        } catch (error) {
          console.log(error);
        }
      }
    }
  }
  </script>

  <style>
  </style>